<template>
  <div style="padding: 10px 15px">
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        placeholder="请输入角色名称"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        class="filter-item seachbttn"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查询</el-button
      >
    </div>
    <div class="filter_fenge"></div>
    <div class="filter-container">
      <el-button
        v-if="Jurisdiction('添加')"
        class="filter-item bttnleft"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
        >新增</el-button
      >
      <el-button
        v-if="Jurisdiction('删除')"
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        @click="deleteClick()"
        >删除</el-button
      >
    </div>
    <!--table-->
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="SysroleData"
      fit
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="角色名称" align="left" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色描述" align="left" min-width="180px">
        <template slot-scope="{ row }">
          <span>{{ row.memo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="right" width="50px" min-width="50px">
        <template slot-scope="{ row }">
          <span>{{ row.orderID }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            v-if="Jurisdiction('编辑')"
            type="primary"
            size="mini"
            @click="handleClick(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="deleteClick(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData(this)"
    />

    <!--table-->
    <!--弹出层 模块-->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="55%"
      :before-close="handleClose"
      :show-close="false"
    >
      <el-form :model="form" :inline="true" label-position="right">
        <el-form-item label="角色名称">
          <el-input v-model="form.roleName" />
        </el-form-item>
        <el-form-item label=" 角色描述">
          <el-input v-model="form.memo" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.orderID" />
        </el-form-item>
        <el-card
          v-for="item in ModuleList"
          :key="item.moduleName"
          class="box-card"
          :label="item.moduleName"
          :value="item.moduleName"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.moduleName }}</span>
          </div>

          <!--功能-->
          <div
            v-for="childModule in item.childModule"
            :key="childModule.moduleName"
            :label="childModule.moduleName"
            class="childModule"
          >
            <span>{{ childModule.moduleName }}</span>

            <el-checkbox
              v-for="childAction in childModule.childAction"
              :key="childAction.id"
              v-model="childAction.isCheck"
              :label="childAction.actionName"
              @change="sect($event, childAction.id, item)"
            />
          </div>
          <!--功能-->
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>

    <!--详情-->
    <el-dialog title="详情" :visible.sync="dialogdetailsVisible" width="55%">
      <el-form :model="details_form" :inline="true" label-position="right" />
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { AjaxToken, AjaxGet } from "@/api/common";
import { SelectAjax } from "@/api/common";
import { array } from "jszip/lib/support";
import { Jurisdiction } from "@/api/common";
import "url-search-params-polyfill";
export default {
  name: "Role",
  components: { Pagination },
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      formLabelWidth: "120px",
      SysroleData: null,
      ModuleList: [],
      childActions: [],
      childActionelect: [],
      multipleSelection: [],
      listQuery: {
        title: "",
        total: 0,
        page: 1,
        limit: 1000,
      },
      listLoading: true,
      dialogFormVisible: false,
      dialogdetailsVisible: false,
      dialogStatus: "",
      textMap: {
        update: "修改",
        create: "添加",
      },
      form: {
        id: "",
        roleName: "",
        memo: "",
        orderID: "",
        isDeleted: "",
        cpnId: "",
      },
      details_form: {
        iD: "",
        roleName: "",
        memo: "",
        orderID: "",
        isDeleted: "",
        cpnId: "",
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleClose() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    sect(e, id, item) {
      if (e) {
        this.childActions.push({ ID: id });
      } else {
        var truechildAction = [];
        this.childActions.forEach((element) => {
          if (element.ID != id) {
            truechildAction.push(element);
          }
        });
        this.childActions = truechildAction;
      }
    },
    Jurisdiction(moduleActionName) {
      return Jurisdiction(moduleActionName, this);
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.fetchData();
    },
    handleCreate() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      var params = new URLSearchParams();
      backstage.LoadModuleList(this, "");
    },
    handleClick(row) {
      this.form.id = row.id;
      this.form.roleName = row.roleName;
      this.form.memo = row.memo;
      this.form.orderID = row.orderID;
      backstage.LoadModuleList(this, row.id);
      this.dialogFormVisible = true;
    },
    saveForm() {
      var params = new URLSearchParams();
      params.append("ID", this.form.id);
      params.append("RoleName", this.form.roleName);
      params.append("Memo", this.form.memo);
      params.append("OrderID", this.form.orderID);
      params.append("moduleActions", JSON.stringify(this.childActions));
      backstage.SaveRole(this, params);
    },
    fetchData() {
      this.listLoading = true;
      // 搜索
      var params = new URLSearchParams();
      params.append(
        "Parms",
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          "}"
      );
      params.append("RoleName", this.listQuery.title);
      backstage.GetRoleList(this, params);
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    deleteClick(row) {
      this.listLoading = true;
      var multis = [];
      var params = new URLSearchParams();
      if (row == undefined || row == "") {
        var arr = this.multipleSelection;
        if (arr == undefined || arr.length <= 0) {
          this.$message({
            showClose: true,
            message: "请至少选中一行",
            type: "error",
          });
          this.listLoading = false;
          return;
        } else {
          for (var i = 0; i < arr.length; i++) {
            multis.push(arr[i].id);
          }
          params.append("delds", JSON.stringify(multis));
        }
      } else {
        multis.push(row.id);
        params.append("delds", JSON.stringify(multis));
      }
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then((a) => {
          this.listLoading = true;
          backstage.DelRole(this, params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.listLoading = false;
        });
    },
  },
};
// 后台事件
var backstage = {
  // 获取Sysrole集合
  GetRoleList: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetRoleList",
      params,
      "post",
      function (res) {
        var body = res.data.data;
        thisobj.SysroleData = body.rows;
        thisobj.listQuery.page = body.page;
        thisobj.listQuery.total = body.records;
        thisobj.listLoading = false;
      },
      function (err) {}
    );
  },
  LoadModuleList: function (thisobj, roleid) {
    AjaxGet(
      thisobj,
      "LoadModuleList?roleid=" + roleid + "",
      function (res) {
        var body = res.data.data;
        thisobj.ModuleList = body;
        thisobj.ModuleList.forEach((element) => {
          element.childModule.forEach((childModule) => {
            childModule.childAction.forEach((childAction) => {
              if (childAction.isCheck) {
                thisobj.childActions.push({ ID: childAction.id });
              }
            });
          });
        });
      },
      function (err) {}
    );
  },
  SaveRole: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "SaveRole",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 2000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {}
    );
  },
  DelRole: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "DelRole",
      params,
      "post",
      function (res) {
        thisobj.listLoading = true;
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 2000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {}
    );
  },
};
</script>
<style lang="scss" scoped>
.childModule {
  margin: 0px 0px 20px 40px !important;
}
.childModule .el-checkbox-group {
  margin: 10px 0px 0px 40px !important;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.clearfix {
  font-size: 20px;
  -webkit-box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-bottom: 10px;
}
</style>

